<template>
  <div class="page">
    <headerbar>{{ title }}</headerbar>
    <section class>
      <div class="mui-active">
        <div class="d-scroll list-text" style>
          <fetchData
            v-if="isLoading"
            :loading="isLoading"
            :data="swipeData"
          ></fetchData>
          <cube-scroll
            ref="scroll"
            :options="options"
            @pulling-up="onPullingUp"
            @pulling-down="onPullingDown"
          >
            <cube-swipe>
              <div class v-for="data in swipeData" :key="data.id">
                <div class="item"  @click="goDetail(data)">
                  <div class="one">
                    {{ data.goodsName }}
                    <span class="cx">
                      <!-- <img
                            src="../../../../static/images/dangjian/mall/undo.png"
                            alt
                          /> -->
                      {{getStatus(data.status)}}
                    </span>
                  </div>
                  <div class="two">{{ data.note }}</div>
                  <div class="three">
                    <span class="text">订单时间：</span>
<!--                    {{ data.totalPoint }}-->
                    {{getTime(data.createTime) }}
                    <span class="xq" @click="goDetail(data)">查看详情</span>
                    <!-- <span class="sc">删除记录</span> -->
                  </div>
                </div>
              </div>
            </cube-swipe>
            <!-- <div
              class="text-center no-data"
              v-if="!isLoading && swipeData.length === 0"
            >
              <img src="../../../../static/images/no_data.png" alt />
              <p>暂无数据</p>
            </div> -->
            <!-- W noData -->
            <noData v-if="!isLoading && swipeData.length === 0"></noData>
            <onBottom v-else-if="onBottom"></onBottom>
          </cube-scroll>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import tools from "@/utils/tools";
import api from "@/common/config/api";
import moment from "moment";
export default {
  name: "",
  data() {
    return {
      isLoading: true,
      fn: tools,
      options: {
        pullUpLoad: true,
        scrollbar: false,
        pullDownRefresh: {
          threshold: 90,
          stop: 0,
          txt: ' '
        },
      },
      onBottom: false, // W onBottom
      objectsName: "",
      userInfo: {},
      swipeData: [
        /* {
          id: "82306fce06f8aaffd1b833048c80299d",
          memberId: "10000000000001",
          createTime: "2020-09-24 17:06:19",
          memberUsername: "djhy_tc",
          memberNickname: "谭神",
          totalPoint: 1,
          status: 4,
          note: null,
          goodsId: "c0e5aadd7d5646748b8dc873a3b1de68",
          goodsName: "补答题卷",
          groupId: "hybshid",
          groupName: "红云办商户",
          validTimeStart: null,
          validTimeEnd: null,
          categoryKey: "BDT_KEY",
        }, */
      ],
      infinite: true,
      pageIndex: 1,
      fromType: "",
      subType: "",
      title: "预约记录",
      role: true,
      roleData: "",
      showTypes: "1",
    };
  },
  created() {
    this.userInfo = this.$localStorage.get("userInfo");
    this.getPage();
  },
  methods: {
    goDetail(data) {
      this.$router.push({ path: "/mallRevocationDetail"});
      sessionStorage.setItem("revocationDetail", JSON.stringify(data));
    },
    getPage() {
      this.isLoading = true;
      let data = {
        pageNo: this.pageIndex + "",
        pageSize: 20,
        userId: this.userInfo.id,
      };
      this.fetchService.mallGetOrdersWithCancel(data).then((res) => {
        this.isLoading = false;
        if (res.code !== 0) {
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          return tools.tip(res.message);
        }
        if (res.data.length < 1) {
          this.onBottom =true
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          this.options.pullUpLoad = false
          return
        }
        this.pageIndex++;
        this.swipeData = this.swipeData.concat(res.data);
        setTimeout(() => {
          this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
        }, 100);
      });
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.getPage();
    },
    onPullingDown() {
      this.onBottom =false
      this.options.pullUpLoad = true
      this.swipeData = []
      console.log('onPullingDown')
      this.pageIndex = 1
      this.getPage()
    },
    getTime (createTime) {
      if (!createTime) {
        return ''
      }
      return moment(createTime).format('MM月DD日 HH:mm:ss')
    },
    getStatus (status){
    //订单状态：1->待使用；2->已使用；4->待预约；5->待确认；6->预约失败；7->已撤销；9->已过期;
      if(status === 7){
        return '已撤销'
      }else if(status === 6){
        return '预约失败'
      }
      // switch (status) {
      //     case 1:
      //       return "待使用"
      //       break;
      //     case 2:
      //       return "已使用"
      //       break;
      //     case 4:
      //       return "待预约"
      //       break;
      //     case 5:
      //       return "待确认"
      //       break;
      //     case 6:
      //       return "预约失败"
      //       break;
      //     case 7:
      //       return "已撤销"
      //       break;
      //     case 9:
      //       return "已过期"
      //       break;
      //     default:
      //       break;
      // }
    }
  },
};
</script>

<style scoped lang="scss">
@import "@/common/stylus/moon.scss";
.list-text .item {
  font-size: $titleFontSize;
  margin: 20px 0;
  .one {
    font-weight: bolder;
    padding-bottom: 10px;
    .cx {
      font-size: $defaultFontSize;
      font-weight: bold;
      color: #9a9a9a;
      float: right;
      img {
        width: 30px;
        height: 28px;
        position: relative;
        top: 5px;
      }
    }
  }
  .two {
    line-height: 1rem;
    font-size: $tipFontSize;
    color: #9a9a9a;
  }
  .three {
    font-size: $defaultFontSize;
    color: #e20002;
    .text {
      font-size: $defaultFontSize;
    }
    .xq,
    .sc {
      font-weight: inherit;
      font-size: $tipFontSize;
      color: #2aab0e;
      line-height: 18px;
      padding: 10px 15px;
      border: 1px solid #2aab0e;
      border-radius: 10px;
      float: right;
      /* position: relative;
      top: -8px; */
      cursor: pointer;
    }
    .sc {
      margin: 0 18px 0 0;
      border: 1px solid #9a9a9a;
      color: #9a9a9a;
    }
  }
  span {
    font-weight: inherit;
    font-size: inherit;
  }
}
</style>
